<template>
  <div class="model">
    <div class="model-head">
			<div class="item-title-list">
				<div class="item-title" :class="{activate: modelIndex==index}" v-for="(data,index) in ModelList" :key="index" @click="changeModel(index)">
					<span>
						{{data.name}}
					
					</span>
          	<em v-if="is_manage">
							<i class="el-icon-edit" title="编辑" @click.stop="edit(data)"></i>
							<i class="el-icon-delete" title="删除" @click.stop="del(data)"></i>
						</em>
				</div>
			</div>
      <ul class="head-right">
        <li v-for="(item,index) in headRightList" :key="item.id">
          <a href="javascript:void(0);" @click="handel(index)">
            <img :src="item.icon" alt="" />
            <span>{{ item.text }}</span>
          </a>
        </li>
      </ul>
    </div>
    <main>
      <el-row class="clearfix" :gutter="30">
        <el-col :sm="24" :md="12" :lg="12" class="left1">
          <div class="nav-left">
            <ul class="left-nav">
              <li v-for="(item,index) in navList" :key="item.id" :class="{activate: status === index}" @click="changeStatus(index)">
                {{item.text}}
              </li>
            </ul>
            <div class="left-purpose">
              <h3>模型目的:</h3>
              <p v-if="ModelList.length">
                {{ModelList[modelIndex].purpose}}
              </p> 
            </div>
          </div>
          <div class="left-main">
						<funnel-chart :seriesData="funnelSeriesData"></funnel-chart>
					</div>
        </el-col>
        <el-col :sm="24" :md="12" :lg="12" class="right1">
          <div class="right-top chart-box chart-box-border">
            <angle-arrow></angle-arrow>
            <data-title title="数据排行"></data-title>
						<line-chart
							:series="datasRankSeries" 
							:splitNumber="10" 
							:xAxisData="datasRankXaxis" 
              :seriesIndex="0"
							top="20px"
							left="50px" 
							right="50px" 
							bottom="20px"
              :isDispatch="false"
							:isCustom="true">
						</line-chart>
          </div>
          <div class="right-bottom chart-box chart-box-border">
            <angle-arrow></angle-arrow>
            <data-title :title="ModelList[modelIndex].name" v-if="ModelList.length"></data-title>
            <table-data :list="browseList" :step="0">
              <tr slot="table-head">
                <td
                  :width="browseWidthList[index]"
                  v-for="(item, index) in browseHeadList"
                  :key="index"
                >
                  <span>{{ item.text }}</span>
                </td>
              </tr>
              <div class="table-list" slot="table-list">
                <div
                  class="table-rwo"
                  v-for="(item, index) in browseList"
                  :key="index"
                >
                  <div :style="{ width: browseWidthList[0],'text-align': 'left',paddingLeft: '20px' }">
                    <span>{{ item.level }}</span>
                  </div>
                  <div :style="{ width: browseWidthList[1] }">
										<el-tooltip class="item" effect="light" :content="item.where" placement="top">
											<span>{{item.where}}</span>
										</el-tooltip>
                  </div>
                  <div :style="{ width: browseWidthList[2] }">
                    <span>{{ item.now_view }}</span>
                  </div>
                  <div :style="{ width: browseWidthList[3] }">
                    <span>{{ item.now_count }}</span>
                  </div>
                  <div :style="{ width: browseWidthList[4] }">
                    <span>{{ item.rise_count }}</span>
                  </div>
                  <div :style="{ width: browseWidthList[5] }">
                    <span>{{ item.rate_count }} %</span>
                  </div>
                  <div :style="{ width: browseWidthList[6] }">
                    <span>{{ item.length_count }}</span>
                  </div>
                  <div :style="{ width: browseWidthList[7] }">
                    <span>{{ item.length_rate_count }} %</span>
                  </div>
                  <!-- <div :style="{ width: browseWidthList[8] }">
                    <span>{{ item.rise_count }}</span>
                  </div> -->
                </div>
              </div>
            </table-data>
          </div>
        </el-col>
      </el-row>
    </main>
  </div>
</template>

<script>
import angleArrow from "@/statistics/components/angle-arrow.vue";
import dataTitle from "@/statistics/components/data-title.vue";
import tableData from "@/statistics/components/map/table-data.vue";
import funnelChart from "@/statistics/components/funnel.vue";
import addModel from "./add-model.vue";
import lineChart from "@/statistics/components/line-chart.vue";
export default {
  data() {
    return {
      headRightList: [
        {
          id: 0,
          text: "添加模型",
          icon: require("@/assets/data-images/icon1.png"),
        },
        {
          id: 1,
          text: "管理",
          icon: require("@/assets/data-images/icon2.png"),
        },
      ],
      browseHeadList: [
        {
          id: 0,
          text: "序号",
        },
        {
          id: 1,
          text: "页面",
        },
        {
          id: 2,
          text: "浏览数(PV)",
        },
        {
          id: 3,
          text: "用户量(uv)",
        },
        {
          id: 4,
          text: "横向增长",
        },
        {
          id: 5,
          text: "横向增长百分比",
        },
				{
				  id: 6,
				  text: "纵向流失(UV)",
				},
        {
          id: 7,
          text: "纵向占比(UV)",
        }
      ], //实时浏览记录头部
      browseWidthList: [
        "8%",
        "13%",
        "16%",
        "16%",
        "11%",
        "12%",
        "11.5%",
        "12.5%",
        "10%",
      ], //实时浏览记录宽度
      browseList: [],
      navList:[
        {
          id:'',
          text:'全部'
        },
				{
				  id: 'today',
				  text:'今日'
				},
        {
          id: 'yesterday',
          text:'昨日'
        },
        {
          id: 'week',
          text:"本周"
        },
        {
          id: 'lastWeek',
          text:"上周"
        },
        {
          id: 'month',
          text:"本月"
        },
        {
          id: 'lastMonth',
          text:"上月"
        },
        {
          id: 'year',
          text:"今年"
        },
        {
          id: 'lastYear',
          text:"去年"
        },
      ],
      status: 0,
			modelIndex: 0,
			ModelList: [],
			is_manage: false,
			funnelSeriesData: [],
			datasRankSeries: [],
			datasRankXaxis: []
    };
  },
  components: {
    angleArrow,
    dataTitle,
    tableData,
		funnelChart,
		lineChart
  },
	methods: {
		handel(index){
			switch (index){
				case 0:
					this.$layer.iframe({
						content: {
							content: addModel, //传递的组件对象
							parent: this,//当前的vue对象
							data: {}//props
						},
						area:['780px','60%'],
						title: '添加模型',
						maxmin: true,
					})
					break;
				case 1:
          this.is_manage = !this.is_manage;
          this.$forceUpdate();
					break;
			}
		},
		getModelList(time,data_model_id){
			let data = {
				paramter: 1,
				time: time,
				limit: 20
			}
			if(data_model_id){
				data.data_model_id = data_model_id
			}
			this.$http(this.$ptApiList.ModelList,data).then(res => {
				this.ModelList = res.datas.data
				if(!res.datas.data[0].foot_list_all.length){
					this.$confirm(this.navList[this.status].text +'没有数据，请重新选择', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning',
						showCancelButton: false
					}).then(() => { })
					return false
				}
				this.funnelSeriesData = []
				if(res.datas.data.length){
					res.datas.data.forEach((item,index) => {
						if(index==this.modelIndex){
							if(item.foot_list_all.length){
								let rota = 100 / item.foot_list_all.length
								item.foot_list_all.forEach((data,i) => {
									this.funnelSeriesData.push({
										value: 100 - (i*rota),
										name: data.where.replace(/\n/g,'\n\n'),
										percentCustom: data.rate,
										allCount: data.count,
									})
								})
							}
							if(item.foot_list.length){
								let datasRankObj = {
									type: 'line',
									data: [],
									smooth: true,
									itemStyle: {
										color: "#00fbf3"
									},
									areaStyle: {
										color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
											offset: 0,
											color: 'rgba(0,251,243,1)'
										}, {
											offset: 1,
											color: 'rgba(0,251,243,.1)'
										}])
									},
									label: {
										show: true,
										color: '#fdcf00',
										formatter: '{c}人',
										fontSize: '14px'
									},
									lineStyle: {
										width: 4,
									}
								}
								item.foot_list.forEach(item => {
									this.datasRankXaxis.push(item.where)
									datasRankObj.data.push(item.count)
								})
								this.datasRankSeries.push(datasRankObj)
							}
						}
					})
				}
			}).then(() => {
				this.getModelTable()
			})
		},
		getModelTable(data_model_id){
			let type = '3'
			switch (this.status){
				case 0:
				case 1:
					type = '3'
					break;
				case 2:
				case 3:
					type = '4'
					break;
				case 4:
				case 5:
					type = '2'
					break
				case 7:
				case 8:
					type = '1'
					break
			}
			this.$http(this.$ptApiList.ModelTable,{
				data_model_id: this.ModelList[this.modelIndex].data_model_id, 
				time: this.status?this.navList[this.status].id:'',
				type: type,
				limit: 20
			}).then(res => {
				this.browseList = res.datas
			})
		},
		changeModel(index){
			this.modelIndex = index
			this.funnelSeriesData = []
			this.datasRankSeries = []
			this.datasRankXaxis = []
			this.getModelList(this.navList[this.status].id)
		},
		edit(data){
			this.$layer.iframe({
				content: {
					content: addModel, //传递的组件对象
					parent: this,//当前的vue对象
					data: {modelData: data}//props
				},
				area:['780px','60%'],
				title: '修改模型',
				maxmin: true,
			})
		},
		del(data){
			this.$confirm('删除后不可恢复, 是否确认删除?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$http(this.$ptApiList.DelateModel,{data_model_id: data.data_model_id}).then(res => {
					this.$layer.msg('删除成功')
					this.getModelList(this.navList[this.status].id)
				})
			}).catch(() => {});
		},
		changeStatus(index){
			this.status = index
			this.funnelSeriesData = []
			this.datasRankSeries = []
			this.datasRankXaxis = []
			this.getModelList(this.navList[index].id)
		}
	},
	mounted() {
		this.getModelList(this.navList[this.status].id)
	}
};
</script>

<style lang="scss" scoped>
.model {
  height: 100%;
  .model-head {
    margin-left: 12px;
    display: flex;
    justify-content: space-between;
    height: 32px;
    line-height: 32px;
		margin-left: -15px;
		.item-title-list{
			display: flex;
			overflow-y: hidden;
			overflow-x: auto;
			flex: 1;
			min-width: 0;
			height: 34px;
			padding: 0 35px;
			margin-right: 35px;
		}
    .item-title {
      // display: flex;
      cursor: pointer;
			// min-width: 120px;
      height: 34px;
      transform: skew(30deg);
      border: 1px solid #00f3fc;
      color: #00f3fc;
			margin-left: -1px;
			padding: 0 15px;
      text-align: center;
      white-space: nowrap;
      span {
        display: inline-block;
        text-align: center;
        transform: skew(-30deg);
        font-family: MicrosoftYaHei-Bold;
        font-size: 14px;
				position: relative;
      }
      em{
        display: inline-block;
        transform: skew(-30deg);
        font-family: MicrosoftYaHei-Bold;
        font-size: 14px;
				position: relative;
					i{
						margin-left: 10px;
					}
			}
      &.activate {
        background-color: #00f3fc;
        color: #0f2c52;
      }
    }
    .head-right {
      display: flex;
      li {
        position: relative;
        height: 32px;
        width: 100px;
        line-height: 32px;
        background-color: #0d3765;
        cursor: pointer;
				z-index: 10;
        &::before {
          position: absolute;
          content: "";
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 1px;
          height: 16px;
          background-color: #0a607c;
        }
        &:last-child {
          &::before {
            width: 0px;
          }
        }
        a {
          display: block;
          text-align: center;
          color: #00f9fa;
          img {
            vertical-align: middle;
            margin-right: 4px;
          }
        }
      }
    }
  }
  .chart-box {
    position: relative;
    height: 100%;
    padding: 10px;
    border-radius: 5px;
    &::before,
    &::after {
      content: " ";
      position: absolute;
      top: 0;
      left: 50%;
      width: 199px;
      height: 2px;
      transform: translateX(-50%);
      background: url("../../../assets/data-images/tabs-light.png");
    }
    &::after {
      top: initial;
      bottom: 0;
    }
  }
  .clearfix {
    height: 100%;
    .el-col {
      height: 100%;
    }
  }
  .chart-box-border {
    background-color: #0f1e53;
    border: solid 1px rgba(0, 255, 255, 0.3);
    box-shadow: 0 0 15px rgba(0, 252, 252, 0.3) inset;
  }
  main {
    margin-top: 24px;
    height: calc(100% - 66px);
    .left1{
      display: flex;
      .nav-left{
        position: relative;
        display: flex;
        flex-direction: column;
        .left-nav{
          width: 40px;
          height: 362px;
          border: 1px solid #0c6174;
          li{
            height: 40px;
            line-height: 40px;
            text-align: center;
            border-bottom: 1px solid #0c6174;
            color: #00f8fc;
            font-size: 12px;
            cursor: pointer;
            &:last-child{
              border-bottom: 0;
            }
            &.activate{
              background-color: #00f8fc;
              color: #0d3765;
            }
          }
        }
        .left-purpose{
          position: absolute;
          left: 0px;
          top: 364px;
          margin-top: 60px;
          overflow-y:scroll;
          scrollbar-width: none;
          width: 100px;
          height: 230px;
          color: #64aac9;
          padding-bottom: 10px;
          z-index: 99;
          h3{
            font-size: 14px;
          }
          p{
            margin-top: 10px;
            font-size: 12px;
          }
        }
        .left-purpose::-webkit-scrollbar{
          display: none;
        }
      }
      
      .left-main{
				flex: 1;
				min-width: 0;
      }
    }
    .right1 {
      .right-top {
        height: calc((100% - 26px) / 2);
      }
      .right-bottom {
        margin-top: 26px;
        height: calc((100% - 26px) / 2);
      }
    }
  }
}
</style>